<template>
	<div class="ratingselect">
		<div class="rating-type border-1px">
			<span @click="select(2,$event)" class="block positive" :class="{'active':selectType===2}">
				{{desc.all}}
				<span class="count">{{ratings.length}}</span>
			</span>
			<span @click="select(0,$event)" class="block positive" :class="{'active':selectType===0}">
				{{desc.positive}}
				<span class="count">{{positives.length}}</span>
			</span>
			<span @click="select(1,$event)" class="block negative" :class="{'active':selectType===1}">
				{{desc.negative}}
				<span class="count">{{negatives.length}}</span>
			</span>
		</div>
		<div @click="toggleContent" class="switch" :class="{'on':onlyContent}">
			<span class="icon-check_circle"></span>
			<span class="text">只看有内容的评价</span>
		</div>
	</div>
</template>

<script type="text/ecmascript-6">
	const POSITIVE = 0;
	const NEGATIVE = 1;
	const ALL = 2;

	export default {
		props: {
			ratings: {
				type: Array,
				default() {
					return [];
				}
			},
			selectType: {
				type: Number,
				default: ALL
			},
			onlyContent: {
				type: Boolean,
				default: false
			},
			desc: {
				type: Object,
				default() {
					return {
						all: '全部',
						positive: '满意',
						negative: '吐槽'
					};
				}
			}
		},
		computed: {
			positives() {
				return this.ratings.filter((rating) => {
					return rating.rateType === POSITIVE;
				});
			},
			negatives() {
				return this.ratings.filter((rating) => {
					return rating.rateType === NEGATIVE;
				});
			}
		},
		methods: {
			select(type, event) {
				this.selectType = type;
				this.$emit('ratingtypeSelect', type);
			},
			toggleContent() {
				this.onlyContent = !this.onlyContent;
				this.$emit('contentToggle', this.onlyContent);
			}
		}
	};
</script>

<style lang="less">
	@import '../../common/less/z.less';
	@import '../../common/less/css3.less';
	@import '../../common/less/appstyle.less';
	.ratingselect {
		.rating-type {
			padding: 18px 0;
			margin: 0 18px;
			.border-1px(rgba(7, 17, 27, 0.1));
			.block {
				.d-ib();
				padding: 8px 12px;
				margin-right: 8px;
				line-height: 16px;
				.border-radius(1px);
				.font-s12();
				color: rgb(77, 85, 93);
				&.active {
					color: #fff;
				}
				.count {
					margin-left: 2px;
					.font-s8();
				}
				&.positive {
					background: rgba(0, 160, 220, .2);
					&.active {
						background: rgba(0, 160, 220, 1);
					}
				}
				&.negative {
					background: rgba(73, 85, 93, .2);
					&.active {
						background: rgba(73, 85, 93, 1);
					}
				}
			}
		}
		.switch{
			padding:12px 18px;
			line-height:24px;
			border-bottom:1px solid reba(7,17,27,.1);
			color:rgb(147,153,159);
			&.on{
				color:cornflowerblue;
			}
			icon-check_circle{
				margin-right:4px;
				.font-s24();
			}
			text{
				.font-s12();
			}
		}
	}
</style>